import React from "react";
import { NextPage } from "next";
import { Row, Col, Card, Table, Badge, Tag, Button } from "antd";

import "../src/theme/var.scss";
import { AdminLayout } from "@/layout";
import { ArticleApi } from "@/api/article";
import dayjs from "dayjs";
import style from "./index.module.scss";
import Link from "next/link";

interface IHomeProps {
  articles: IArticle[];
}
const Home: NextPage<IHomeProps> = ({ articles }) => {
  const column = [
    {
      title: "标题",
      key: "title",
      dataIndex: "title",
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      render: (status) => {
        return status === "draft" ? (
          <Badge status="warning" text="草稿" />
        ) : (
          <Badge status="success" text="已发布" />
        );
      },
    },
    {
      title: "分类",
      dataIndex: "category",
      key: "category",
      render: (category) =>
        category ? <Tag color="purple">{category.label}</Tag> : null,
    },
    {
      title: "标签",
      dataIndex: "tags",
      key: "tags",
      render: (tags) => (
        <span>
          {tags.map((t) => (
            <Tag key={t.label}>{t.label}</Tag>
          ))}
        </span>
      ),
    },
    {
      title: "阅读量",
      dataIndex: "views",
      key: "views",
      render: (views) => (
        <Badge
          count={views}
          showZero={true}
          overflowCount={Infinity}
          style={{ backgroundColor: "#52c41a" }}
        />
      ),
    },
    {
      title: "发布时间",
      dataIndex: "publishAt",
      key: "publishAt",
      render: (date) => dayjs(date).format("YYYY-MM-DD HH:mm:ss"),
    },
    {
      title: "操作",
      dataIndex: "id",
      key: "id",
      render: (id) => (
        <Link href={`/article/editor/${id}`}>
          <a target="_blank">编辑</a>
        </Link>
      ),
    },
  ];

  return (
    <AdminLayout>
      <div>
        <div className={style.newArticle}>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              padding: "10px 4px",
            }}
          >
            <span>最新文章</span>
            <Link href="/article">
              <a>更多</a>
            </Link>
          </div>
          <Row gutter={16}>
            {articles.slice(0, 4).map((item) => (
              <Col span={24 / 4} key={item.id}>
                <Link
                  href={"/article/editor/[id]"}
                  as={`/article/editor/${item.id}`}
                >
                  <a>
                    <div className={style.articleItem}>
                      <div className={style.cover}>
                        <img src={item.cover} alt="文章封面" />
                      </div>
                      <p className={style.title}>{item.summary}</p>
                    </div>
                  </a>
                </Link>
              </Col>
            ))}
          </Row>
        </div>
        <div className={style.list}>
          <Table columns={column} dataSource={articles} rowKey="id" />
        </div>
      </div>
    </AdminLayout>
  );
};

Home.getInitialProps = async () => {
  const articles = await ArticleApi.getArticles({ page: 1, pageSize: 10 });
  return { articles: articles[0] };
};

export default Home;
